<template >
	<view class="layout">
		<view class="login">
			<view class="left">
				<image src="../../static/login-left.png" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="header">
					<text :class="isChage ?'hleft active' : 'hleft'" @click="(isChage === true) ? ischange=true : isChage = !isChage">密码登录</text>
					<text :class="!isChage ?'hright active' : 'hright'" @click="(isChage === false) ? ischange=true : isChage = !isChage">验证码登录</text>
				</view>
				<view class="body">
					<view style="margin-top: 25px;">手机号</view>
					<input type="text" placeholder="请输入手机号" placeholder-class="plc"/>
					<view v-if="isChage">
						<view>密码</view>
						<input type="text" placeholder="请输入密码" placeholder-class="plc"/>
					</view>
					<view v-if="!isChage">
						<view>验证码</view>
						<view style="display: flex;justify-content: center;align-items: center;">
							<input type="text" placeholder="请输入验证码" placeholder-class="plc" style="width: 50%;height: 40px;"/>
							<view class="yzm" 
							style="width: 50%;height: 20px;
							padding: 9px;border: 1px solid #fe7300;
							text-align: center;color: #fe7300;">
								获取验证码
							</view>
						</view>
					</view>
					<button type="primary">登录</button>
				</view>
				<view class="footer">
					<view>
						还没有账号，去<text @click="f()">注册</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
let isChage = ref(true)

const f = ()=>{
	uni.navigateTo({
		url:'/pages/register/register'
	})
}
</script>

<style lang="scss">
.plc{
	font-size: 13px;
	margin-left: 10px;
}
.layout{
	display: flex;
	align-items: center;
	overflow-y: auto;
	height: 100vh;
	background: #b9d86c;
	.login{
		margin: 0 auto;
		border-radius: 22px;
		overflow: hidden;
		max-width: 60%;
		width: 100%;
		height: 75%;
		align-items: center;
		background: #fff;
		display: flex;
		.left{
			width: 60%;
			height: 100%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.right{
			height: 100%;
			padding: 0 40px;
			margin-top: 160px;
			font-size: 18px;
			.header{
				.hleft.active{
					height: 40px;
					border-bottom: 3px solid #4c8dfb;
					color: #4c8dfb;
				}
				.hright{
					margin-left: 35px;
				}
				.hright.active{
					margin-left: 35px;
					height: 40px;
					border-bottom: 3px solid #4c8dfb;
					color: #4c8dfb;
				}			
			}
			.body{
				input{
					width: 285px;
					height: 32px;
					border: 1px solid #ced4da;
					margin: 15px 0;
					border-radius: 4px;
				}
				
				button{
					margin-top: 60px;
				}
			}
			.footer{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				color: #999999;
				margin-top: 25px;
				text{
					color: #4c8dfb;
				}
			}
		}
	}
}
.yzm:active{
	color: #999999;
}
</style>
